﻿@page "/components/accordion"

<PageOutlet Url="components/accordion"
            Title="Accordion"
            Description="accordion component of the bit BlazorUI components" />

<DemoPage Name="Accordion"
          SecondaryNames="@(["Expander"])"
          Description="The Accordion component allows the user to show and hide sections of related content on a page."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          GitHubUrl="Surfaces/Accordion/BitAccordion.razor"
          GitHubDemoUrl="Surfaces/Accordion/BitAccordionDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitAccordion Title="Accordion">
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. 
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
            in potential the quiet magic of beginnings, where everything is still to come, and the possibilities 
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </BitAccordion>
    </DemoExample>

    <DemoExample Title="NoBorder" RazorCode="@example2RazorCode" Id="example2">
        <BitAccordion Title="Accordion" NoBorder>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. 
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
            in potential the quiet magic of beginnings, where everything is still to come, and the possibilities 
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </BitAccordion>
    </DemoExample>

    <DemoExample Title="Multiple" RazorCode="@example3RazorCode" Id="example3">
        <div>You can define multiple accordions together.</div><br />
        <BitAccordion Title="Accordion 1">
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
            for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
        </BitAccordion>
        <BitAccordion Title="Accordion 2">
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. 
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
            in potential the quiet magic of beginnings, where everything is still to come, and the possibilities 
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </BitAccordion>
        <BitAccordion Title="Accordion 3">
            In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits 
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite 
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the 
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be 
            shaped into meaning, and the emotions ready to resonate with every reader.
            <br />
            In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and 
            each word has the power to transform into something extraordinary. Here lies the start of something new—an 
            opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an 
            idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey 
            begins here, in this quiet moment where everything is possible.
        </BitAccordion>
    </DemoExample>

    <DemoExample Title="Description" RazorCode="@example4RazorCode" Id="example4">
        <div>You can set a short description inside the Accordion header.</div><br />
        <BitAccordion Title="General settings" Description="The general settings of the application">
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. 
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
            in potential the quiet magic of beginnings, where everything is still to come, and the possibilities 
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </BitAccordion>
    </DemoExample>

    <DemoExample Title="Controlled" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div>You can control the accordions to open only one at a time.</div><br />
        <BitAccordion Title="General settings"
                      Description="I am an accordion"
                      OnClick="() => controlledAccordionExpandedItem = 1"
                      IsExpanded="controlledAccordionExpandedItem == 1">
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
            for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
        </BitAccordion>
        <BitAccordion Title="Users"
                      Description="You are currently not an owner"
                      OnClick="() => controlledAccordionExpandedItem = 2"
                      IsExpanded="controlledAccordionExpandedItem == 2">
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. 
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
            in potential the quiet magic of beginnings, where everything is still to come, and the possibilities 
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </BitAccordion>
        <BitAccordion Title="Advanced settings"
                      Description="Filtering has been entirely disabled for whole web server"
                      OnClick="() => controlledAccordionExpandedItem = 3"
                      IsExpanded="controlledAccordionExpandedItem == 3">
            In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits 
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite 
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the 
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be 
            shaped into meaning, and the emotions ready to resonate with every reader.
            <br />
            In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and 
            each word has the power to transform into something extraordinary. Here lies the start of something new—an 
            opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an 
            idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey 
            begins here, in this quiet moment where everything is possible.
        </BitAccordion>
    </DemoExample>

    <DemoExample Title="Binding" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
        <div>You can bind values ​​with Accordion.</div><br />
        <BitToggle @bind-Value="AccordionToggleIsEnabled" OnText="Enabled" OffText="Disabled" />
        <br />
        <BitToggle @bind-Value="AccordionToggleIsExpanded" OnText="Expanded" OffText="Collapsed" />
        <br /><br />
        <BitAccordion Title="Accordion"
                      Description="I am an accordion"
                      IsEnabled="AccordionToggleIsEnabled"
                      @bind-IsExpanded="AccordionToggleIsExpanded">
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. 
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
            in potential the quiet magic of beginnings, where everything is still to come, and the possibilities 
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </BitAccordion>
    </DemoExample>

    <DemoExample Title="Customization" RazorCode="@example7RazorCode" Id="example7">
        <div>This Accordion header is customized.</div><br />
        <BitAccordion>
            <HeaderTemplate Context="isExpanded">
                <BitButton Variant="BitVariant.Text" IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
                <div class="custom-header">
                    <span class="custom-title">Accordion 1</span>
                    <span class="custom-desc">I am an accordion</span>
                </div>
            </HeaderTemplate>
            <Body>
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. 
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities 
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
            </Body>
        </BitAccordion>
        <br /><br />
        <div>This Accordion content is customized by the BitCarousel.</div><br />
        <BitAccordion Title="Nature" Description="I am an accordion">
            <BitCarousel AnimationDuration="1">
                <BitCarouselItem>
                    <img src="/_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg">
                </BitCarouselItem>
                <BitCarouselItem>
                    <img src="/_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
                </BitCarouselItem>
                <BitCarouselItem>
                    <img src="/_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
                </BitCarouselItem>
                <BitCarouselItem>
                    <img src="/_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
                </BitCarouselItem>
            </BitCarousel>
        </BitAccordion>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example8RazorCode" Id="example8">
        <div>Use BitAccordion in right-to-left (RTL).</div><br />
        <BitAccordion Dir="BitDir.Rtl"
                      Title="تنظیمات"
                      Description="من یک آکاردئون هستم!">
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
            چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
            و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
        </BitAccordion>
    </DemoExample>
</DemoPage>